<template>
  <div class="prompts">
    <div class="page-center">
      <div class="left">
        <div class="tab-wrap">
          <div
            :class="currentTab == 'category' ? 'current-tab-item' : 'tab-item'"
            @click="onTabChange('category')"
          >
            分类
          </div>
          <div
            :class="currentTab == 'industry' ? 'current-tab-item' : 'tab-item'"
            @click="onTabChange('industry')"
            style="margin-left: 20px"
          >
            行业
          </div>
        </div>
        <div class="tree-list beauty-scroller-bar">
          <template v-if="currentTab == 'category' && categoryList.length > 0">
            <a-menu
              mode="inline"
              v-model:openKeys="cateOpenKeys"
              v-model:selectedKeys="cateSelectedKeys"
              @click="onCateMenuClick"
            >
              <a-menu-item :key="-1"> 全部 </a-menu-item>
              <a-sub-menu v-for="item of categoryList" :key="item.id">
                <template #icon>
                  <img
                    :src="item.cat_icon"
                    alt=""
                    class="tree-item-icon"
                    style="width: 24px; height: 24px; object-fit: cover"
                    v-if="item.cat_icon"
                  />
                </template>
                <template #title>{{ item.cat_name }}</template>
                <template v-if="item.sub && item.sub.length > 0">
                  <a-menu-item v-for="child of item.sub" :key="child.id">
                    {{ child.cat_name }}
                  </a-menu-item>
                </template>
              </a-sub-menu>
            </a-menu>
          </template>

          <template v-if="currentTab == 'industry' && industryList.length > 0">
            <a-menu
              mode="inline"
              v-model:selectedKeys="industrySelectedKeys"
              @click="onIndustryMenuClick"
            >
              <a-menu-item :key="-1"> 全部 </a-menu-item>
              <a-menu-item v-for="item of industryList" :key="item.id">
                {{ item.name }}
              </a-menu-item>
            </a-menu>
          </template>
        </div>
      </div>
      <div class="right">
        <template v-if="noData">
          <div class="empty-wrap">
            <a-empty
              image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
              :image-style="{
                height: '100px',
              }"
              description=""
            >
              <div style="margin-top: 20px; color: #666">
                当前{{ currentTab == "category" ? "分类" : "行业" }}下暂无提示词
              </div>
            </a-empty>
          </div>
        </template>
        <template v-else-if="currentCateId || currentIndustryId">
          <div v-if="list.length > 0" class="prompt-list beauty-scroller-bar">
            <div
              class="prompt-item"
              v-for="(item, index) of list"
              :key="index"
              @click="toPromptDetail(item)"
            >
              <div class="flex align-center">
                <img
                  :src="item.prompt_words_category.cat_icon"
                  alt=""
                  class="prompt-item-cat_icon"
                  v-if="item.prompt_words_category.cat_icon"
                />
                <span class="prompt-item-cat_name">
                  {{ item.prompt_words_category.cat_name }}
                </span>
              </div>
              <div class="prompt-item-title">{{ item.title }}</div>
              <div class="prompt-item-content">{{ item.description }}</div>
              <div style="color: #999; margin-top: 10px">
                <CheckCircleOutlined />
                <span style="padding-left: 5px">{{
                  item.use_num >= 100 ? item.use_num : "小于100"
                }}</span>
              </div>
            </div>

            <div
              class="flex justify-between align-center mt-30"
              v-if="total > 20"
            >
              <div style="color: #666">共 {{ total }} 条</div>
              <a-pagination
                show-size-changer
                v-model:current="page"
                v-model:pageSize="pageSize"
                :total="total"
                @showSizeChange="onPageSizeChange"
                @change="onPageChange"
              />
            </div>
          </div>
        </template>
      </div>
    </div>

    <LoginModal
      :visible="loginVisible"
      @onClose="loginVisible = false"
      @loginCallback="loginCallback"
    />
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
  h,
  onBeforeUnmount,
  createVNode,
} from "vue";
import request from "../../common/utils/request";
import store from "../../store/index";
import { useRoute, useRouter } from "vue-router";
import utils from "../../common/utils/utils";
import { Modal, notification, message } from "ant-design-vue";
import { CheckCircleOutlined } from "@ant-design/icons-vue";
export default defineComponent({
  name: "Prompts",
  components: { CheckCircleOutlined },

  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      loginVisible: false,
      currentTab: "category",
      categoryList: [],
      industryList: [],
      currentCateId: null,
      currentIndustryId: null,
      page: 1,
      pageSize: 20,
      total: 0,
      list: [],

      cateOpenKeys: [],
      cateSelectedKeys: [],
      industrySelectedKeys: [],

      noData: false,
    });

    const getCategoryList = () => {
      request
        .get("/work_ai", "/user/promptWords/category/list", {})
        .then((res) => {
          if (res.result) {
            state.categoryList = res.result;
          }
        });
    };

    const getIndustryList = () => {
      request
        .get("/work_ai", "/user/promptWords/industry/list", {})
        .then((res) => {
          if (res.result) {
            state.industryList = res.result;
          }
        });
    };

    const loginCallback = () => {
      state.loginVisible = false;
      router.go(0);
    };

    const onTabChange = (key) => {
      if (key == state.currentTab) {
        return;
      }
      state.currentTab = key;
      state.currentCateId = null;
      state.currentIndustryId = null;
      if (key == "category") {
        state.cateSelectedKeys = [-1];
      } else {
        state.industrySelectedKeys = [-1];
      }
      state.currentCateId = -1;
      getPromptList();
    };

    const getPromptList = (type) => {
      let params = {
        page: state.page,
        pageSize: state.pageSize,
      };
      if (state.currentCateId > 0) {
        params.cat_id = state.currentCateId;
        params.industry_id = state.currentIndustryId;
      }
      if (state.currentIndustryId > 0) {
        params.industry_id = state.currentIndustryId;
      }
      request
        .get("/work_ai", "/user/promptWords/list", { ...params })
        .then((res) => {
          state.total = res.total;
          state.list = res.list;
          if (res.list && res.list.length > 0) {
            state.noData = false;
          } else {
            state.noData = true;
          }
        });
    };

    const onCateMenuClick = ({ item, key, keyPath }) => {
      if (key == -1) {
        state.currentCateId = -1;
        router.replace({
          name: "PromptsList",
        });
      } else {
        if (state.currentCateId == key) {
          return;
        }
        state.currentCateId = key;

        let query = {};
        if (state.currentTab == "category") {
          if (state.cateOpenKeys.length > 0) {
            query.cate = state.cateOpenKeys[0];
            query.subCat = Number(state.currentCateId);
          }
        } else {
          query = {
            industry: state.currentIndustryId,
          };
        }
        router.replace({
          name: "PromptsList",
          query,
        });
      }
    };

    const onIndustryMenuClick = ({ item, key, keyPath }) => {
      if (key == -1) {
        state.currentIndustryId = -1;
        router.replace({
          name: "PromptsList",
        });
      } else {
        if (state.currentIndustryId == key) {
          return;
        }
        state.currentIndustryId = key;

        let query = {};
        if (state.currentTab == "category") {
          if (state.cateOpenKeys.length > 0) {
            query.cate = state.cateOpenKeys[0];
            query.subCat = Number(state.currentCateId);
          }
        } else {
          query = {
            tab: 2,
            industry: state.currentIndustryId,
          };
        }
        router.replace({
          name: "PromptsList",
          query,
        });
      }
    };

    const toPromptDetail = (item) => {
      console.log(item);
      let query = {};
      if (state.currentTab == "category") {
        query.cate = Number(item.prompt_words_category.parent_id);
        query.subCat = Number(item.prompt_words_category.id);
      } else {
        query = {
          industry: state.currentIndustryId,
        };
      }
      query.id = item.id;
      router.push({
        name: "PromptDetail",
        query,
      });
    };

    const init = () => {
      getCategoryList();
      getIndustryList();

      console.log(route.query, route.query.tab == 2);
      if (route.query.cate || route.query.subCat) {
        if (route.query.cate) {
          state.cateOpenKeys.push(Number(route.query.cate));
        }
        if (route.query.subCat) {
          state.cateSelectedKeys.push(Number(route.query.subCat));
          state.currentCateId = route.query.subCat;
        }
      } else if (route.query.tab == "2") {
        state.currentTab = "industry";
        if (route.query.industry) {
          state.currentIndustryId = route.query.industry;
          state.industrySelectedKeys.push(Number(route.query.industry));
        } else {
          state.currentCateId = -1;
          state.industrySelectedKeys = [-1];
        }
      } else {
        state.currentCateId = -1;
        state.cateSelectedKeys = [-1];
      }
      getPromptList();
    };

    const onPageChange = (page, pageSize) => {
      state.page = page;
      getPromptList();
    };

    const onPageSizeChange = (page, pageSize) => {
      state.pageSize = pageSize;
      state.page = 1;
      getPromptList();
    };

    init();

    watch(
      () => router.currentRoute.value,
      (val) => {
        console.log(val);
        if (val.name == "PromptsList") {
          init();
        }
      }
    );

    return {
      ...toRefs(state),
      loginCallback,
      onTabChange,
      onCateMenuClick,
      onIndustryMenuClick,
      toPromptDetail,
      onPageChange,
      onPageSizeChange,
    };
  },
});
</script>

<style lang="less" scoped>
.prompts {
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow: hidden auto;

  .page-center {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    background-color: #fff;
    border-radius: 8px;

    .left {
      width: 20%;
      height: 100%;
      border-right: 1px solid #f1f1f1;

      .tab-wrap {
        border-bottom: 1px solid #f1f1f1;
        margin: 0 10px;
        display: flex;
        align-items: flex-end;
        padding: 10px 13px;
        font-size: 16px;
        height: 54px;

        .tab-item {
          cursor: pointer;
        }

        .current-tab-item {
          color: @primary-color;
          font-size: 20px;
          font-weight: bold;
          cursor: pointer;
        }
      }

      .tree-list {
        padding: 10px 0 0 0;
        width: 100%;
        height: calc(100% - 54px);
        overflow: hidden auto;
        .tree-item {
          padding: 10px 20px;
          font-size: 16px;
          color: #374151;
          cursor: pointer;
          transition: 0.2s cubic-bezier(0.4, 0.2, 1);

          &:hover {
            color: @primary-color;
          }

          .tree-item-icon {
            width: 24px;
            height: 24px;
            object-fit: cover;
            margin-right: 10px;
          }

          .sub-list {
            margin-left: 20px;

            .sub-tree-item {
              padding: 5px 0;
              color: #374151;
              cursor: pointer;
              transition: 0.2s cubic-bezier(0.4, 0.2, 1);

              &:hover {
                color: @primary-color;
              }
            }
          }
        }
      }
    }

    .right {
      width: 80%;
      height: 100%;

      .empty-wrap {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .prompt-list {
        width: 100%;
        height: 100%;
        padding: 0 20px 30px 20px;
        overflow: hidden auto;

        .prompt-item {
          padding: 15px 20px;
          border-radius: 6px;
          margin-top: 20px;
          transition: 0.2s ease;
          border: 1px solid #f1f1f1;
          // box-shadow: 0 0px 10px #193e7b14;
          cursor: pointer;

          &:hover {
            .prompt-item-title {
              color: @primary-color;
            }
          }

          .prompt-item-cat_icon {
            width: 24px;
            height: 24px;
            object-fit: cover;
            margin-right: 5px;
          }

          .prompt-item-cat_name {
            color: #6b7280;
          }

          .prompt-item-title {
            font-weight: 600;
            font-size: 16px;
            color: #374151;
            margin-top: 10px;
          }

          .prompt-item-content {
            margin-top: 10px;
            color: #4b5563;
          }
        }
      }
    }
  }
}
</style>
